<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="{{URL::asset('./css/login.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/reset.css')}}">
<!-- <a><img src="{{URL::asset('./img/index/floor_tel.png')}}" alt=""><span> -->
<meta name="_token" content="{{csrf_token()}}">
<div class="loginBg" id="login">
    <div class="loginForm">
        <div class="loginMain">

            <div class="login_title">
                <img :src="overall.site_logo">
            </div>
            <div class="login_nav">
                <div :class='{active:activeBo==1}' @click="setActiveBo(1)">密码登录</div>
                <div :class='{active:activeBo==2}' @click="setActiveBo(2)">验证码登录</div>
            </div>
            <el-form :model="form" label-position="top" size="mini" ref="form">
                <el-form-item prop="tel" label="手机号" :rules="telRule">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="密码" v-if="activeBo==1" prop="password" :rules="passRule">
                    <el-input v-model="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="验证码" v-if="activeBo==2" prop="code" :rules="codeRule">
                    <el-input v-model="form.code">
                        <span slot="suffix" @click="getCode" class="suffixCon">获取验证码<a v-if="codeBo">(@{{codeTime}}s)</a></span>
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="remenberPass" v-if="activeBo==1" @click="remenberPass">
                <span :class="{active:remenberBo}">
                    <img src="{{URL::asset('./img/login/remenber.png')}}" v-if="remenberBo">
                </span><a>记住密码</a>
            </div>
            <el-button class="submit" :loading="submitBo" @click="submitForm('form')">
                确认登录
            </el-button>
        </div>
        <div class="forgetRegister">
            <div>

                <a target="_blank" href="{{ route('home.login.findPass') }}">忘记密码？</a>&nbsp;&nbsp;<a target="_blank" href="{{ route('home.register.register') }}">新用户注册 </a>
            </div>
        </div>
        <div class="loginFooter">
            <span>第三方登录</span>
            <div>
                <a><img src="{{URL::asset('./img/login/qq.png')}}" alt=""></a>
                <a><img src="{{URL::asset('./img/login/wx.png')}}" alt=""></a>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/public.js') }}" type="text/javascript"></script>

<script>
    $(() => {
        var validateTel = (rule, value, callback) => {
            var reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/;
            if (value == '') {
                callback(new Error('请输入联系电话'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入正确的联系电话!'));
            } else {
                callback();
            }
        };
        let app = new Vue({
            el: '#login',
            data: () => {

                return {
                    overall: "",
                    activeBo: 1,
                    form: {
                        tel: "",
                        password: '',
                        code: ''
                    },
                    telRule: [{
                        required: true,
                        validator: validateTel,
                        trigger: 'blur'
                    }],
                    passRule: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }],

                    codeRule: [{
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'blur'
                    }],
                    remenberBo: false,
                    codeTime: 60,
                    submitBo: false,
                    codeBo: false
                }
            },
            created() {
                window.$message = (res) => {
                    this.$message({
                        message: res,
                        type: 'error'
                    });
                }
                $.get("{{ route('home.public.config') }}", (res) => {
                    sessionStorage.setItem("overall", JSON.stringify(res.data))
                    this.overall = res.data
                });
                this.form.tel = getCookie("HRTel") || '';
                this.form.password = getCookie("HRPassword") || '';
                if (getCookie("HRTel")) {
                    this.remenberBo = true;
                }
            },
            methods: {
                remenberPass() {
                    this.remenberBo = !this.remenberBo;
                },
                setActiveBo(num) {
                    if (this.submitBo) {

                    } else {
                        this.activeBo = num;
                        this.$refs['form'].resetFields();
                    }
                },
                getCode() {
                    if (this.codeTime == 60) {
                        $.get("{{ route('home.public.config') }}", (res) => {
                            this.codeBo = true
                            let a = setInterval(() => {
                                this.codeTime -= 1;
                                if (this.codeTime == 0) {
                                    this.codeBo = false;
                                    this.codeTime = 60;
                                    clearInterval(a)
                                }
                            }, 1000);
                        });
                    }
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitBo = true;
                            //账号密码登录
                            if (this.activeBo == 1) {
                                let data = {
                                    mobile: this.form.tel,
                                    password: this.form.password,
                                }
                                apiAjax("{{ route('home.login.login') }}", 'post', data, (res) => {
                                    if (res.code == 0) {
                                        this.$message({
                                            message: '登录成功',
                                            type: 'success'
                                        });
                                        if (this.remenberBo) {
                                            setCookie('HRTel', this.form.tel);
                                            setCookie('HRPassword', this.form.password);
                                        } else {
                                            delCookie('HRTel')
                                            delCookie('HRPassword')
                                        }
                                        sessionStorage.setItem("HRuserDetails", JSON.stringify(res.data))
                                        window.location.href = "{{ route('home.index.index') }}";
                                    } else {
                                        this.$message({
                                            message: res.msg,
                                            type: 'warning'
                                        });
                                    }
                                    this.submitBo = false;
                                }, (erro) => {
                                    this.submitBo = false;
                                });
                                //验证码登录
                            } else {
                                let data = {
                                    mobile: this.form.tel,
                                    code: this.form.password,
                                }
                                apiAjax("{{ route('home.login.login') }}", 'post', data, (res) => {
                                    if (res.code == 0) {
                                        this.$message({
                                            message: '登录成功',
                                            type: 'success'
                                        });
                                        sessionStorage.setItem("HRuserDetails", JSON.stringify(res.data))
                                        window.location.href = "{{ route('home.index.index') }}";
                                    } else {
                                        this.$message({
                                            message: res.msg,
                                            type: 'warning'
                                        });
                                    }
                                    this.submitBo = false;
                                }, (erro) => {
                                    this.submitBo = false;
                                });
                            }

                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
            }

        })
    })
</script>